<template>
  <div>
    <ylheader  :title="'消息'"></ylheader>
    <ul class="mine_ul">
      <li class="mine_ul_li" v-for="(items,index) in titlearray" :key="index" @click="godetail(index)" :class="{xitong:index==2}" :style="{'border-bottom':index==2||index==(titlearray.length-1)?'none':'1px solid #e6e6e6'}">
          <div class="mine_ul_div">
              <div class="mine_ul_tlte_fa">
                <span class="mine_ul_left" :class="[items.iconclass,{li_icon:index==1,left_icon:index==3}]" ></span>
                <span class="mine_ul_title">{{items.title}}</span>
                <span class="red-point" v-if="items.notreadnum>0&&items.notreadnum<10" >
                  <div class="centerreddot">{{items.notreadnum}}</div>
                </span>
                <span class="red-point reddotone" v-else-if="items.notreadnum>9&&items.notreadnum<100" >
                  <div class="centerreddot">{{items.notreadnum}}</div>
                </span>
                <span class="red-point reddottwo" v-else-if="items.notreadnum>99" >
                  <div class="centerreddot">{{largemsg}}</div>
                </span>
              </div>
              <span class="yl-2r mine_ul_right"></span>
         </div>
      </li>
  </ul>
  <indexnavigation></indexnavigation>
  </div>
</template>
<script>
import ylheader from "src/components/yl-header.vue";
import { mapState, mapMutations } from "vuex";
import indexnavigation from "src/components/index/indexnavigation.vue";
import api from "src/api/index";
export default {
  name:"message",
  data() {
    return {
      msg: "我的",
      largemsg:"99+",
      titlearray:[{"title":"赞","iconclass":"yl-2zan","notreadnum":""},{"title":"评论","iconclass":"yl-2ping","notreadnum":""},{"title":"系统","iconclass":"yl-xitong","notreadnum":""},{"title":"给小绿留言","iconclass":"yl-liuy","notreadnum":""},{"title":"活动推荐","iconclass":"yl-activity","notreadnum":""}],
    };
  },
  computed: {
    ...mapState(["notreadmsg"])
  },
  mounted() {
    this.getisnotreadnum();
  },
  methods: {
    getisnotreadnum() {
          this.titlearray[0].notreadnum=this.notreadmsg.notReadLike;
          this.titlearray[1].notreadnum=this.notreadmsg.notReadComment;
          this.titlearray[2].notreadnum=this.notreadmsg.notReadSysMsg;
          this.titlearray[3].notreadnum=this.notreadmsg.notreadleavemsg;
          this.titlearray[4].notreadnum=this.notreadmsg.notreadrec;
    },
   godetail(index){
          switch(index){
            case 0:
            this.$router.push({path:'/ylMessage',query:{tag:1}});
            break;
            case 1:
            this.$router.push({path:'/ylMessage',query:{tag:2}});
            break;
            case 2:
            this.$router.push({path:'/sysmsg'});
            break;
            case 3:
            this.$router.push({path:'/chatlog'});
            break;
            case 4:
            this.getreadpush();
            this.$router.push({path:'/activityrecommendation'});
            break;
            default:
            break;
          }  
      },
    getreadpush(){
      api.getreadpush().then(res=>{});
    }
  },
  components: {
    ylheader,
    indexnavigation,
  }
};
</script>
<style>
.red-point {
  position: relative;
  border-radius:0.5rem;
  width:0.3rem;
  height:0.24rem;
  font-size: 0.2rem;
  margin-left: 0.2rem;
  background-color: #fa4a39;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reddotone{
  width:0.5rem;
}
.reddottwo{
  width:0.6rem;
}
.centerreddot{
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  font-size: 0.2rem;
  justify-content: center;
  color: #fff;
  padding-top: 0.03rem;
}
.mine_ul{
    height: 0.9rem;
    background: #ffffff;
}
.mine_ul_li{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid #e6e6e6;
    background: #ffffff;    
}
.mine_ul_div{
    margin: 0 0.3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.3rem;
}
.mine_ul_left{
   padding-right: 0.2rem;
   font-size: 0.34rem;
   display: flex;
   align-items: center;
}
.mine_ul_tlte_fa{
    display: flex;
    height: 100%;
    align-items: center;
    color: #494949;
}
.li_icon{
  margin-right:-0.1rem;
}
.left_icon{
  padding-top: 0.02rem;
}
.xitong{
  margin-bottom: 0.2rem
}
</style>